<template>
    <el-container style="height: calc(100% - 66px);">
        <el-aside width="auto" style="padding: 20px 0 20px 20px; height: 100%;">
            <div class="ps-panel nav-left-menu main-menu" style="height: 100%;">
                <div class="ps-panel-head">
                    <i class="ps-panel-head-icon iconfont icon-link"></i>
                    <span class="ps-panel-head-title">知识查询</span>
                    <button type="button" class="iconfont icon-screen menuTensile ps-right" v-on:click="menuTensile"></button>
                </div>

                <div class="ps-panel-body" >
                    <el-menu :default-active="$route.path" :router="true" class="el-menu-vertical" :collapse="isCollapse">
                        <el-menu-item index="/knowledge/entities">
                            <i class="iconfont icon-model" style="color: #f03d39;"></i>
                            <span slot="title">实体查询</span>
                        </el-menu-item>

                        <el-menu-item index="/knowledge/relationships">
                            <i class="iconfont icon-model" style="color: #f03d39;"></i>
                            <span slot="title">关系查询</span>
                        </el-menu-item>

                        <el-menu-item index="/knowledge/properties">
                            <i class="iconfont icon-model" style="color: #f03d39;"></i>
                            <span slot="title">属性查询</span>
                        </el-menu-item>

                        <el-menu-item index="/knowledge/subnet">
                            <i class="iconfont icon-model" style="color: #f03d39;"></i>
                            <span slot="title">子图查询</span>
                        </el-menu-item>

                        <!-- <el-menu-item index="/knowledge/aggregate">
                            <i class="iconfont icon-model" style="color: #f03d39;"></i>
                            <span slot="title">聚合查询</span>
                        </el-menu-item> -->

                    </el-menu>
                </div>
            </div>
        </el-aside>
        <el-main>
            <router-view style="height: 100%; background-color: #fff; overflow: auto;"></router-view>
        </el-main>
    </el-container>
</template>

<script>
    import $ from 'jquery';

    export default {
        name: "modelApp",
        data() {
            return {
                isCollapse: false,
                active: 1,
                dialogTableVisible: false,
            };
        },
        methods: {
            menuTensile: function () {
                // eslint-disable-next-line
                let $navMenu = $('.main-menu');
                // eslint-disable-next-line
                this.isCollapse === true ?  (
                        $($navMenu).css('width', '268px'),
                            $($navMenu).find('span').eq(0).css('display', 'block'),
                            $($navMenu).find('i').eq(0).css('display', 'block')
                    ):
                    ($($navMenu).css('width', '64px'),
                            $($navMenu).find('span').eq(0).css('display', 'none'),
                            $($navMenu).find('i').eq(0).css('display', 'none')
                    );
                this.isCollapse = !this.isCollapse;
            },
            getIndex(index, num){
                return num+'-'+index;
            }
        }
    }
</script>
